<!-- 
/**
 * 单元名称：tweet
 * 单元功能：推文
 * 所属模块功能：推文
 * 创建人：liang
 * 创建时间：231204
 * 修改人：
 * 修改时间：
 */
 -->
<template>
  <div class="container">
    <m-header>{{ barTitle }}</m-header>
    <div class="main" v-if="article">
      <div class="title">{{ article.title }}</div>
      <div class="author" v-show="article.author">
        <div>{{ article.author }}</div>
        <div>{{ article.input_time }}</div>
      </div>
      <div class="content" v-html="article.content"></div>
    </div>
  </div>
</template>

<script>
import { getInfoArticle, } from '@/request/api'

export default {
  name: '',
  components: {

  },
  mixins: [],
  props: {},
  data() {

    return {
      barTitle: '推文',
      
      // title: '',
      title: '',
      author: '',
      articleCont: '',
      
      article: null,
    }
  },
  computed: {
    
  },
  watch: {
    
  },
  created() {
    this.getTweetData()
  },
  mounted() {
    
  },
  methods: {
    // 接口
    getTweetData() {
      // let { id, } = this.$route.params
      let { id, } = this.$route.query

      if(!id) return
      getInfoArticle({
        id,
      }).then(res => {
        let { code, data, } = res
        if(code !== 200) return
        if(!data) return
        // let { content, title, author, } = data
        this.article = data
      })
    },
  },
}
</script>

<style scoped lang='less'>
.container {
  width: 100%;
  overflow-x: hidden;
}
.main {
  padding: 0 15px 20px;
  // background: #fff;

  .title {
    margin: 15px 0 10px;
    // font-size: 0.48rem;
    font-size: 19px;
    // font-weight: bold;
  }

  .author {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
    // font-size: 0.35rem;
    font-size: 15px;
    color: rgb(168, 168, 168);
  }

  ::v-deep {
    font-size: 16px;

    img {
      width: 100% !important;
    }
    video {
      width: 100% !important;

    }

    // p {
    //   background: pink;
    // }
  }
  
}
</style>